// 获取文章列表

const params = {
  pagenum: 1, // 页码值
  pagesize: 2, // 每页显示多少条数据
  cate_id: '', // 文章分类的id  默认是空
  state: ''  // 文章的状态
}

let total = 0 // 数据的总数

function render() {
  axios({
    method: 'GET',
    params,
    url: 'http://api-breakingnews-web.itheima.net/my/article/list',
    // 自定义请求头
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    console.log(res);
    // 
    if (res.status === 0) {
      $('tbody').empty()
      res.data.forEach(obj => {
        let theTr = `<tr>
        <td>${obj.title}</td>
        <td>${obj.cate_name}</td>
        <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm:ss')}</td>
        <td>${obj.state}</td>
        <th>
        <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
            </th>
    </tr>`;
        $('tbody').append(theTr)
      });

      // 设置文章的总数
      total = res.total

      // 设置分页

      setPage()
    }
  })
}

// 分页的逻辑代码 必须等到请求成功之后,才能执行
function setPage() {
  layui.use('laypage', function () {
    const laypage = layui.laypage;

    //完整功能
    laypage.render({
      elem: 'page'
      , count: total            //数据总数，从服务端得到
      , limit: params.pagesize  // 每页显示的条数
      , limits: [2, 3, 5, 10, 20] // 每页条数的选择项
      , curr: params.pagenum // 起始页 
      , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
      , jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if (!first) {
          console.log('不是首次的代码执行');
          /*
            修改params里的页码值 和 每页的数据
          */
          params.pagenum = obj.curr
          params.pagesize = obj.limit
          console.log(params);
          render() // 重新渲染
        }
      }
    });
  });
}

$('tbody').on('click', '.del', function () {
  const id = $(this).attr('myid')
  // 
  layer.confirm('确定要删除么?', { icon: 3, title: '温馨提示' }, function (index) {

    axios({
      method: 'GET',
      url: `http://api-breakingnews-web.itheima.net/my/article/delete/${id}`,
      // 自定义请求头
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then(({ data: res }) => {
      console.log(res);
      layer.msg(res.message)
      // 判断请求成功
      if (res.status === 0) {
        render() // 重新渲染
        layer.close(index);
      }
    })


  });




})


// 获取文章分类列表
function getCates() {
  axios({
    method: 'GET',
    url: 'http://api-breakingnews-web.itheima.net/my/article/cates',
    // 自定义请求头
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    console.log(res);
    // 判断请求成功
    if (res.status === 0) {
      // 默认一进来要添加一个option 默认选项 --- 请选择分类
      $('select[name="category"]').append(`<option value="" lay-verify="cate">请选择分类</option>`)
      res.data.forEach(obj => {
        const theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
        $('select[name="category"]').append(theOption)
      })
      // 等循环结束之后,再执行form.render() 手动的去刷新了一下当前的select框的数据, 因为option标签是动态插入的
      layui.form.render('select', 'category')
    }
  })
}
getCates()

// 渲染页面
render()

$('form').on('submit', function (e) {
  e.preventDefault()

  /*
    1. 分别获取文章的分类和状态 
    2. 修改params参数里的cate_id 和 state
    3. 发送请求, 渲染页面
  */
  //  文章的分类
  const cate_id = $('select[name="category"]').val()
  // 文章的状态
  const state = $('select[name="state"]').val()
  console.log(cate_id, state);

  // 修改查询参数
  params.cate_id = cate_id
  params.state = state

  // 发送请求
  render()
})
